<template>
	<van-popup
		v-model="visible"
		round
		position="bottom"
		:close-on-click-overlay="false"
		safe-area-inset-bottom
	>
		<div class="appointment">
			<h3 class="title">绑定你的手机号</h3>
			<div style="flex: 1; overflow: auto">
				<van-form
					ref="form"
					@submit="onSubmit"
					@failed="onFailed"
					:show-error-message="false"
					class="form"
				>
					<!-- <p>订单号：{{ order_sn }}</p> -->
					<p style="color: #f38a8e">亲爱的客户，请填写您的联系方式，以便获取优惠信息</p>
					<div class="form-item" style="margin-top: 20px">
						<label>姓名</label>
						<van-field v-model.trim="form.name" placeholder="姓名" />
					</div>
					<div class="form-item required">
						<label>手机号</label>
						<van-field
							v-model.trim="form.mobile"
							type="tel"
							placeholder="手机号"
							maxlength="11"
							:rules="rules.mobile"
						/>
					</div>
					<div class="form-item">
						<div class="line-box">
							<div class="line"></div>
							<div>收货地址<span> (包邮到家)</span></div>
							<div class="line"></div>
						</div>
						<div class="use_appoint">
							<label>收货人是否为预约人</label>
							<van-switch
								size="24px"
								active-color="#ff7400"
								v-model="form.use_appoint"
								@change="useAppointChange"
							/>
						</div>
						<div class="form-item">
							<label>收货人</label>
							<van-field v-model.trim="form.consignee_name" placeholder="姓名" />
						</div>
						<div class="form-item">
							<label>收货人手机号</label>
							<van-field
								v-model="form.consignee_tel"
								type="tel"
								placeholder="手机号"
								maxlength="11"
								:rules="rules.consignee_tel"
							/>
						</div>
						<div class="form-item required">
							<label>收货地区</label>
							<van-field
								v-model="form.area_str"
								name="area_str"
								placeholder="省市区"
								readonly
								:rules="rules.area"
								@click="openAreaPopup"
							>
								<van-icon slot="right-icon" name="arrow" color="#ccc" />
							</van-field>
							<choice-area ref="area" v-model="form.area" @confirm="areaConfirm" />
						</div>
						<div class="form-item required">
							<label>详细地址</label>
							<van-field
								v-model.trim="form.address"
								placeholder="详细地址"
								name="address"
								rows="2"
								autosize
								type="textarea"
								:rules="rules.address"
							/>
						</div>
					</div>
					<div class="form-item">
						<label>预约地区</label>
						<van-field
							v-model="form.region_str"
							name="region_str"
							placeholder="预约地区"
							readonly
							@click="openRegionPopup"
						>
							<van-icon slot="right-icon" name="arrow" color="#ccc" />
						</van-field>
						<choice-area ref="region" v-model="form.region" @confirm="regionConfirm" />
					</div>
					<div class="form-item">
						<label>预到店时间</label>
						<van-field
							v-model="form.appoint_date"
							name="appoint_date"
							placeholder="预到店时间"
							readonly
							@click="openAppointDate"
						>
							<van-icon slot="right-icon" name="arrow" color="#ccc" />
						</van-field>
						<date-picker
							ref="datePicker"
							:min-date="appointDate.min"
							:max-date="appointDate.max"
							@confirm="appointDateConfirm"
						/>
					</div>
				</van-form>
			</div>
			<div class="btns">
				<div class="btn" @click="close">取 消</div>
				<div class="btn submit" @click="clickSubmit">提 交</div>
			</div>
		</div>
	</van-popup>
</template>
<script>
import dayjs from "dayjs";
import DatePicker from "@/components/date-picker";
import ChoiceArea from "@/components/choice-area";

import { mobile } from "@/utils/pattern";
export default {
	components: {
		DatePicker,
		ChoiceArea
	},
	data() {
		let now = dayjs();
		return {
			visible: false,
			appointDate: {
				min: now.add(1, "d").toDate(),
				max: now.add(30, "d").toDate()
			},
			form: {
				name: "",
				mobile: "",
				address: "",
				appoint_date: ""
			},
			rules: {
				mobile: [
					{ required: true, message: "请填手机号" },
					{ pattern: mobile, message: "手机号格式不正确" }
				],
				consignee_tel: [
					{
						message: "收货人手机号格式不正确",
						validator: (val) => {
							if (!val) return true;
							return mobile.test(val);
						}
					}
				],
				area: [{ required: true, message: "请选择收货地区" }],
				address: [{ required: true, message: "请填详细地址" }]
			}
		};
	},
	methods: {
		open() {
			this.visible = true;
		},
		close() {
			this.visible = false;
			this.form = {
				name: "",
				mobile: "",
				address: "",
				appoint_date: ""
			};
		},
		useAppointChange(v) {
			if (!v) return;
			this.form.consignee_name = this.form.name;
			this.form.consignee_tel = this.form.mobile;
		},
		// 打开选地区
		openAreaPopup() {
			this.$refs.area.open();
		},
		areaConfirm(v) {
			this.form.area_str = v.map((item) => item.name).join("-");
		},
		// 打开选地区
		openRegionPopup() {
			this.$refs.region.open();
		},
		regionConfirm(v) {
			this.form.region_str = v.map((item) => item.name).join("-");
		},
		openAppointDate() {
			this.$refs.datePicker.open();
		},
		appointDateConfirm(v) {
			this.form.appoint_date = dayjs(v).format("YYYY-MM-DD");
		},
		// 表单错误
		onFailed({ errors }) {
			this.$toast({
				message: errors[0].message,
				position: "top"
			});
		},
		clickSubmit() {
			this.$refs.form.submit();
		},
		async onSubmit() {
			// this.$toast(this.$api === undefined);
			// return;
			const { name, mobile, area_str, address, ...args } = this.form;
			let form = {
				name,
				mobile,
				address: area_str.replace(/-/g, "") + address,
				data_set: args
				// user_id
			};
			this.$emit("submit", form);
		}
	}
};
</script>

<style lang="scss" scoped>
.appointment {
	font-size: 0.3111rem;
	background: #fff;
	// padding: 10px;
	max-height: 70vh;
	max-width: 640px;
	margin: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	.btns {
		display: flex;
		justify-content: space-around;
		text-align: center;
		// border-top: solid 1px #ebedf0;
		cursor: pointer;
		font-size: 0.35555rem;
		padding: 0.22222rem 0.111111rem;
		box-shadow: 0 0 0.4rem #eee;
		/* color: #909399; */
		.btn {
			margin: 0 1%;
			flex: 1;
			padding: 0.33333rem;
			border: solid 1px #ebedf0;
			border-radius: 4px;
			&.submit {
				box-shadow: none;
				background-color: #ff4b00;
				color: #fff;
				border-radius: 0.11111rem;
				border-color: #ff4b00;
			}
		}
	}
	.title {
		background-color: #ffa96f;
		color: #fff;
		margin: 0;
		padding: 0.3rem;
		text-align: center;
	}
	::v-deep .van-cell {
		margin: 5px 0 16px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 8px 12px;
	}
	.line-box {
		span {
			color: red;
			font-weight: 600;
		}
	}
	.use_appoint {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
	}
	.form {
		padding: 0.44444rem;
		width: 100%;
		box-sizing: border-box;
		p {
			margin-bottom: 5px;
			color: #999;
			font-size: 0.3111rem;
		}

		&-item {
			margin-bottom: 0.222222rem;
			label {
				color: #666;
				position: relative;
				font-size: 0.32rem;
				span {
					color: #888;
				}
			}
			&.required label {
				// padding-left: 8px;
				text-indent: 8px;
				display: block;
				&::after {
					content: "*";
					position: absolute;
					left: -8px;
					top: 0;
					color: red;
				}
			}
		}
	}
}
</style>
